<template>
  <div class="add-goods">
    <el-col :span="24" class="action-bar">
      <router-link v-if="$route.query.goodsListPage"
                   :to="{path: 'goods_list'}">
        <el-button type="primary" size="medium" style="margin-left:20px;">返回</el-button>
      </router-link>
      <el-button v-else type="primary" size="medium" style="margin-left:20px;" @click="$router.back(-1)">返回</el-button>
    </el-col>
    <!--<el-steps :active="1">
      <el-step title="基础信息"></el-step>
      <el-step title="销售信息"></el-step>
      <el-step title="促销活动"></el-step>
      <el-step title="参数信息"></el-step>
      <el-step title="商品详情"></el-step>
    </el-steps>-->
    <!-- <div class="step-title" style=""><h1>基础信息</h1></div>-->
    <!--<h1 class="step-title">基础信息</h1>-->
    <!-- <div style="width: 100%;height: 50px"></div>-->
    <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">

      <div class="step">
        <h1 id="baseMessage">基础信息</h1>

<!--        <el-form-item label="UPC码" prop="upc">-->
<!--          <el-col :span="24">-->
<!--            <el-autocomplete-->
<!--              disabled-->
<!--              style="width: 350px"-->
<!--              class="inline-input"-->
<!--              v-model="addForm.upc"-->
<!--              :fetch-suggestions="querySearch"-->
<!--              placeholder="请输入UPC码，将自动从药品库中匹配药品信息"-->
<!--              :trigger-on-focus="false"-->
<!--              @change="upcChange()"-->
<!--            ></el-autocomplete>-->
<!--            <span style="color: grey;margin-left: 10px" v-if="upcMatchFlag&&upcFistGetFlag">很抱歉，暂时没有匹配的商品/药品信息，您可以提交商品审核，帮助平台完善商品库</span>-->
<!--            &lt;!&ndash;<el-input v-model="addForm.upc"placeholder="请输入UPC码，将自动从药品库中匹配药品信息"></el-input>&ndash;&gt;-->
<!--          </el-col>-->
<!--        </el-form-item>-->


<!--        <el-form-item label="门店" prop="merchant_id">-->
<!--          <el-select v-model="addForm.merchant_id" @change="chooseMerchantByAdd(addForm.merchant_id)" placeholder="选择门店">-->
<!--            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item label="商家分类">
          <el-select v-model="addForm.classify_first_id" placeholder="选择分类"  @change="chooseClassifyByAdd('first')">
            <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>

          <el-select style="margin-left: 8px" v-if="classifyListSecond.length>0" v-model="addForm.classify_second_id" placeholder="选择二级分类"  @change="chooseClassifyByAdd('second')">
            <el-option v-for="opt in classifyListSecond" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
<!--          <span v-if="!addForm.merchant_id" style="color: grey;margin-left: 10px">请选择门店</span>-->
        </el-form-item>

        <el-form-item label="商家图片" style="color: black;">
          <image-drag
            :picList="picList"
            :multiple="true"
            :action="()=> {return this.$api.UPLOAD_IMG}"
            :on-error="uploadError"
            :on-success="handleSuccess"
            @update="updateFile">
          </image-drag>
        </el-form-item>

        <el-form-item label="商家名称" prop="name">
          <el-col :span="8">
            <el-input v-model="addForm.name"placeholder="请输入商家名称"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="商家编码" prop="code">
          <el-col :span="8">
            <el-input v-model="addForm.upc" placeholder="请输入商家编码"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="展示状态">
          <span>下架</span>
          <el-switch
            style="margin: 0 10px"
            v-model="isShop"
            active-color="#13ce66"
            inactive-color="#ff4949" @change="switchChange"></el-switch>
          <span>上架</span>
        </el-form-item>

<!--        <el-form-item label="价格">-->
<!--          <el-col :span="8">-->
<!--            <el-input oninput="if(value < 0 ){value = 0}" type="number" v-model="addForm.selling_price" placeholder="价格" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"></el-input>-->
<!--          </el-col>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="库存">-->
<!--          <el-col :span="8">-->
<!--            <el-input oninput="if(value < 0 ){value = 0}" type="number" v-model="addForm.stock" placeholder="库存"></el-input>-->
<!--          </el-col>-->
<!--        </el-form-item>-->
        <el-form-item label="排序">
          <el-col :span="8">
            <el-input type="number" v-model="addForm.sort" placeholder="排序"></el-input>
          </el-col>
        </el-form-item>
      </div>
      <div class="divider"></div>
      <div class="step">
        <h1>门店介绍</h1>
        <div style="padding: 0 20px">
          <vue-ueditor-wrap v-model="addForm.detail" :config="myConfig"></vue-ueditor-wrap>
        </div>
      </div>
      <div class="divider"></div>

      <div style="padding: 20px 0 10px 20px">
        <el-button type="primary" @click="addSubmitBtn()">修改</el-button>
        <router-link v-if="$route.query.goodsListPage" :to="{path: 'goods_list'}">
          <el-button size="medium" style="margin-left:20px;">返回</el-button>
        </router-link>
        <el-button v-else size="medium" style="margin-left:20px;" @click="$router.back(-1)">返回</el-button>
      </div>

      <!-- 添加规格信息 -->
      <el-dialog title="添加属性" :visible.sync="addSpuVisible" width="50%">
        <el-form label-width="100px">
          <el-form-item label="选择属性名称">
            <el-select multiple v-model="specArr" @change="chooseSpec()" placeholder="选择属性名称">
              <el-option v-for="opt in skuList" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>
          </el-form-item>
          <div class="spec-item" v-for="(item,index) in specValueArr" :key="index">
            <h1 style="font-size: 15px;padding-bottom: 10px">{{item.name}}</h1>
            <el-checkbox-group v-model="specValueArrAAAA[index]">
              <el-checkbox v-for="(opt,cbIndex) in item.value_list" :key="opt.id" :label="opt.id">{{opt.value}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <!--<div class="spec-item" v-for="(item,index) in specArr" :key="index">
            <h1 style="font-size: 15px;padding-bottom: 10px">{{specValueArr[index].name}}</h1>
            <el-checkbox-group v-model="specValueArrAAAA[index]">
              <el-checkbox v-for="(opt,cbIndex) in specValueArr[index].value_list" :key="opt.id" :label="opt.id">{{opt.value}}</el-checkbox>
            </el-checkbox-group>
          </div>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addSpuVisible = false">取消</el-button>
          <el-button type="primary" @click="addSkuBtn">添加</el-button>
        </div>
      </el-dialog>

    </el-form>
  </div>
</template>

<script>
  import imageDrag from "./compoents/image-drag"
  export default {
    name: "add_goods",
    components: {
      'image-drag': imageDrag
    },
    data() {
      return {
        goodsListPage: '',
        isShop: true,
        discountSalesRuleList: [],//促销规则
        dialogImageUrl: '',
        dialogVisible: false,
        picList: [],
        fileList: [],//显示图片格式[{url: 'https://yaogeeks.dindong.cn/api/file/show-image/54'}]
        headerFixed: false,//吸顶标志
        offsetTop: '',
        offsetLeft: '',
        addForm: {
          drug_type: '',
          type_id: '',
          upc: '',
          name: '',
          imageUrl: '',
          classify_first_id: '',
          classify_second_id: '',
          classify_id: '',
          classify_name: '',
          merchant_name: '',
          merchant_id: 1,
          ssn: '',
          sku_ssn: '',//内部库存编号
          approval_number: '',//批准文号
          specification: '',//规格
          thumb_id: [],//商品封面图ID
          selling_price: '',//销售价格
          stock: '',//库存
          manufacturer: '',//生产厂商名称
          manufacturer_address: '',//生产厂商地址
          manufacturer_contact: '',//生产厂商联系方式
          electronic_regulatory_code: '',//电子监管码
          usage_and_dosage: '',//用法用量
          indications: '',//适应症
          adapt_to_the_crowd: '',//适应人群
          component: '',//成分
          adverse_reactions: '',//不良反应
          contraindications: '',//禁忌
          precautions: '',//注意事项
          interaction: '',//药物相互作用
          medication_for_children: '',//儿童用药
          medication_for_pregnancy_x_lactation: '',//妊娠与哺乳用药
          medication_for_aged: '',//老年人用药
          properties: '',//性状
          packing: '',//包装
          dosage_form: '',//剂型
          storage: '',//贮藏
          pharmacological_action: '',//药理作用
          expiry_date: '',//有效期
          detail: '',
          is_shop: 0,//是否上架，0：否 1：是
          sort: '',
          discount_sales_rule: ''
        },
        sortVal:undefined,
        classifyList: [],
        classifyListSecond: [],
        merchantList: [],
        upcMatchFlag: true,
        upcFistGetFlag: false,
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        upcList: [],
        restaurants: [],
        rules: {
          upc: [
            { required: true, message: '请输入UPC码', trigger: 'change' }
          ],
          merchant_id: [
            { required: true, message: '请选择门店', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' }
          ]
        },
        addSpuVisible: false,
        skuValueArr: [],
        skuInfoArr: [],
        specArr: [],
        specArrTemp: [],
        specValueArr: [],
        specValueArrAAAA: [],
        skuList: [],
        skuTableData: [],
        specNameArr: [],
        myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 500,
          // 初始容器宽度
          initialFrameWidth: '100%',
          serverUrl: this.$api.ueditorUrl,
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: '/UEditor/',
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'strikethrough',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
              'simpleupload', 'insertvideo', 'music',
              'horizontal', 'date', 'time',
              'inserttable'
            ]
          ]
        },
      };
    },
    mounted() {
      this.sortVal = this.$route.query.sortVal
      this.goodsListPage = this.$route.query.goodsListPage
      this.getGoodsDetail(this.$route.query.id,this.$route.query.merchant_id)
      this.getMerchantScreenList();
      this.getGoodsSkuList();
      this.getDiscountSalesRule();
      /*this.$nextTick(function(){
        // 这里fixedHeaderRoot是吸顶元素的ID
        let header = document.getElementById("baseMessage");
        // 这里要得到top的距离和元素自身的高度
        this.offsetTop = header.offsetTop;
        this.offsetLeft = header.offsetLeft;
        this.offsetHeight = header.offsetHeight;
        console.log(header)
        console.log(header.offsetLeft)
        console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
      });*/
    },
    methods: {

      //展示状态发生变化
      switchChange(e) {
        if(this.isShop){
          this.addForm.is_shop = 1
        } else{
          this.addForm.is_shop = 0
        }
      },

      //获取门店列表
      async getMerchantScreenList(){
        this.page = this.page
        let params = {
          limit:99,
          page:1
        }
        const res = await this.$api.getMerchantScreenList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.merchantList = list;
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      //获取所有的upc码
      async getUPCList() {
        let params = {
          limit:999999,
          page:1
        }
        const res = await this.$api.getSystemMedicineUpcList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          list.forEach((item,index) => {
            let tempObj = {}
            tempObj.value = item
            this.upcList.push(tempObj)
          })
          this.restaurants = this.upcList

        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },

      querySearch(queryString, cb) {
        let restaurants = this.restaurants;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
      },

      //获取商品详情并编辑
      async getGoodsDetail(id,merchantId) {
        /*const loadingOne = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })*/
        const res = await this.$api.getGoodsDetail({id: id});
        await this.getGoodsClassifyList(merchantId);
        if(res.data.level=='success'){
          let data = res.data.data;
          this.addForm.id = data.id;
          this.addForm.upc = data.upc;
          this.addForm.name = data.name;
          this.addForm.ssn = data.ssn;
          this.addForm.imageUrl = data.imageUrl;
          this.addForm.type_id = parseInt(data.classify_id);
          this.addForm.drug_type = data.drug_type
          this.addForm.merchant_id = parseInt(data.merchant_id);
          let str = [];
          data.classify_list.forEach(item=>{
            str.push(parseInt(item));// TODO TODO TODO
          })
          if(data.classify_list[0]){
            this.addForm.classify_first_id = parseInt(data.classify_list[0]);
          } else{
            this.addForm.classify_first_id = '';
          }
          if(data.classify_list[1]){
            this.addForm.classify_second_id = parseInt(data.classify_list[1]);
            this.getGoodsClassifyList(this.addForm.merchant_id,this.addForm.classify_first_id)
          } else {
            this.addForm.classify_second_id = '';
            this.classifyListSecond = []
          }
          this.addForm.classify_id = str;
          this.addForm.classify_name = data.classify_name;
          this.addForm.merchant_name = data.merchant_name;
          this.addForm.sku_ssn = data.sku_ssn;//内部库存编号
          this.addForm.approval_number = data.approval_number;//批准文号
          this.addForm.specification = data.specification;//规格

          data.thumb_url.forEach((item,index) => {
            let obj = {}
            obj.id = item.img_id
            obj.key = item.img_id
            obj.url = item.img_Url
            this.addForm.thumb_id.push(item.img_id)
            this.picList.push(obj)
          })

          /*this.addForm.thumb_id = data.thumb_id;//商品封面图ID
          this.addForm.thumb_url = data.thumb_url;//商品封面图ID*/

          this.addForm.is_shop = data.is_shop
          if(this.addForm.is_shop == 1){
            this.isShop = true;
          } else{
            this.isShop = false;
          }


          data.discount_sales_rule_list.forEach((item,index) => {
            this.addForm.discount_sales_rule.push(parseInt(item.discount_sales_rule_id))
          })

          this.addForm.selling_price = data.selling_price;//销售价格
          this.addForm.stock = data.stock;//库存
          this.addForm.manufacturer = data.manufacturer;//生产厂商名称
          this.addForm.manufacturer_address = data.manufacturer_address;//生产厂商地址
          this.addForm.manufacturer_contact = data.manufacturer_contact;//生产厂商联系方式
          this.addForm.electronic_regulatory_code = data.electronic_regulatory_code;//电子监管码
          this.addForm.usage_and_dosage = data.usage_and_dosage;//用法用量
          this.addForm.indications = data.indications;//适应症
          this.addForm.adapt_to_the_crowd = data.adapt_to_the_crowd;//适应人群
          this.addForm.precautions = data.precautions//注意事项
          this.addForm.component = data.component;//成分
          this.addForm.adverse_reactions = data.adverse_reactions;//不良反应
          this.addForm.contraindications = data.contraindications;//禁忌
          this.addForm.recautions = data.recautions;//注意事项
          this.addForm.interaction = data.interaction;//药物相互作用
          this.addForm.medication_for_children = data.medication_for_children;//儿童用药
          this.addForm.medication_for_pregnancy_x_lactation = data.medication_for_pregnancy_x_lactation;//妊娠与哺乳用药
          this.addForm.medication_for_aged = data.medication_for_aged;//老年人用药
          this.addForm.properties = data.properties;//性状
          this.addForm.packing = data.packing;//包装
          this.addForm.dosage_form = data.dosage_form;//剂型
          this.addForm.storage = data.storage;//贮藏
          this.addForm.pharmacological_action = data.pharmacological_action;//药理作用
          this.addForm.expiry_date = data.expiry_date;//有效期
          this.addForm.detail = data.detail;
          this.addForm.sort= data.sort;

        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
        /*loadingOne.close()*/
      },

      upcChange() {
        let flag = false;
        for(let i=0;i<this.upcList.length;i++){
          if(this.upcList[i].value==this.addForm.upc){
            flag = true
            break;
          }
        }
        if(!flag){
          this.upcMatchFlag = true;
          /*this.addForm.id = data.id;*/
          /*this.addForm.upc = data.upc;*/
          this.addForm.name = ''

          this.addForm.sku_ssn = ''
          this.addForm.approval_number = ''
          this.addForm.specification = ''

          this.addForm.thumb_id = []
          this.fileList = []
          this.picList = []

          this.addForm.selling_price =''
          this.addForm.stock = ''
          this.addForm.manufacturer = ''
          this.addForm.manufacturer_address = ''
          this.addForm.manufacturer_contact = ''
          this.addForm.electronic_regulatory_code = ''
          this.addForm.usage_and_dosage = ''
          this.addForm.indications = ''
          this.addForm.adapt_to_the_crowd = ''
          this.addForm.precautions = ''
          this.addForm.component = ''
          this.addForm.adverse_reactions = ''
          this.addForm.contraindications = ''
          this.addForm.recautions = ''
          this.addForm.interaction = ''
          this.addForm.medication_for_children = ''
          this.addForm.medication_for_pregnancy_x_lactation = ''
          this.addForm.medication_for_aged = ''
          this.addForm.properties = ''
          this.addForm.packing = ''
          this.addForm.dosage_form = ''
          this.addForm.storage = ''
          this.addForm.pharmacological_action = ''
          this.addForm.expiry_date = ''
          this.addForm.detail = ''
          this.addForm.sort= ''


          this.skuList = []
          this.specArr = []
          this.specArrTemp = []
          this.specValueArr = []
          this.specValueArrAAAA = []
        } else{
          this.getSystemMedicineByUpc(this.addForm.upc)
        }
      },


      //选择门店
      chooseMerchantByAdd(id,status) {
        this.addForm.classify_first_id = '';
        this.addForm.classify_second_id = '';
        this.addForm.classify_id = '';
        this.classifyList = [];
        this.classifyListSecond = [];
        this.getGoodsClassifyList(id)
      },

      //获取门店的分类
      async getGoodsClassifyList(id,pid){
        if(!id){
          this.classifyList = []
          return ;
        }
        this.page = this.page
        let params = {
          limit:99,
          page:1,
          merchant_id: id,
          pid: pid
        }
        const res = await this.$api.getGoodsClassifyList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          if(pid){
            this.classifyListSecond = list;
          } else{
            this.classifyList = list;
          }
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      //获取商品规格
      async getGoodsSkuList(){
        const res = await this.$api.getGoodsSkuList({page: 1,limit: 999});
        if(res.data.level=='success'){
          this.skuList = res.data.data
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      //获取促销规则
      async getDiscountSalesRule(){
        const res = await this.$api.getDiscountSalesRule({page: 1,limit: 999});
        if(res.data.level=='success'){
          this.discountSalesRuleList = res.data.data
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },

      chooseClassifyByAdd(type) {
        if(type=="first"){
          this.getGoodsClassifyList(this.addForm.merchant_id,this.addForm.classify_first_id)
          this.addForm.classify_id = [];
          this.addForm.classify_second_id = '';
          this.addForm.classify_id.push(this.addForm.classify_first_id)
        } else if(type == "second"){
          this.addForm.classify_id.push(this.addForm.classify_second_id)
        }
      },

      //选择规格
      chooseSpec() {//specValueArr
        /*console.log(this.specArr)*/
        /*this.specValueArrAAAA = []
        this.specValueArr = []
        this.specArr.forEach((item1,index1) => {
          this.skuList.forEach((item2,index2) => {
            if(item1 == item2.id){
              this.specValueArr.push(item2)
            }
          })

          this.specValueArrAAAA.push([])
        })*/
        /*console.log(this.specValueArr)*/
        //添加规格
        if(this.specArrTemp.length<this.specArr.length){
          for(let i=0;i<this.skuList.length;i++){
            if(this.skuList[i].id == this.specArr[this.specArr.length - 1]){
              this.specValueArr.push(this.skuList[i])
              break;
            }
          }
          this.specValueArrAAAA.push([])
        } else {//移除规格
          for(let i=0;i<this.specArrTemp.length;i++){
            let flag = true;
            for(let j=0;j<this.specArr.length;j++){
              if(this.specArrTemp[i]==this.specArr[j]){
                flag = false;
              }
            }
            if(flag){
              for(let k=0;k<this.specValueArr.length;k++){
                if(this.specValueArr[k].id==this.specArrTemp[i]){
                  this.specValueArr.splice(k,1)
                  this.specValueArrAAAA.splice(k,1)
                  break;
                }
              }
              break;
            }
          }
        }
        /*console.log(this.specValueArr)
        console.log(this.specValueArrAAAA)*/
        this.specArrTemp = this.specArr
      },

      //添加规格和规格值
      addSkuBtn(type,goodsSkuTable) {
        //判断有没有选择规格值
        let isHaveNull = false
        this.specValueArrAAAA.forEach((item,index) => {
          /*console.log(item)*/
          if(item.length==0){
            isHaveNull = true
          }
        })
        if(isHaveNull){
          this.$message({
            message: '请选择规格值',
            type: 'error',
          });
          return
        }

        //获取规格值所有的组合情况
        let allArr =this.cartesianProductOf(...this.specValueArrAAAA)//组合的sku

        //防止没有选择规格值，而allArr任然会有一个值
        if(this.specValueArrAAAA.length==0){
          allArr = []
        }

        let specNameArr = [] //规格名称

        this.specArr.forEach((item,index) => {
          this.skuList.forEach((item2,index2) => {
            if(item == item2.id){
              specNameArr.push({id: item,name: item2.name})
            }
          })
        })
        /*console.log(specNameArr)*/

        let tableData = []

        allArr.forEach((item1,index1) => {
          let specArr = []
          this.specArr.forEach((item2,index2) => {
            this.skuList.forEach((item3,index3) => {
              if(item2==item3.id){
                item3.value_list.forEach((item4,index4) => {
                  if(item4.id==item1[index2]){
                    specArr.push({pid: item3.id,name: item4.value,id: item4.id})
                  }
                })
              }
            })
          })
          tableData.push({skuArr: specArr,other: {thumb_id: '',thumb_url: '',price: '',stock: '',code: ''}})
        })

        this.skuTableData = tableData
        this.specNameArr = specNameArr
        /*console.log(tableData)*/
        this.addSpuVisible = false


        if(type==2){
          goodsSkuTable.forEach((item,index) => {
            tableData[index].other.thumb_id = item.img_id
            tableData[index].other.thumb_url = item.img_url
            tableData[index].other.price = item.price
            tableData[index].other.stock = item.stock
            tableData[index].other.code = item.sku_num
          })
          this.skuTableData = tableData
        }


      },

      //sku变体组合算法
      cartesianProductOf() {
        return Array.prototype.reduce.call(arguments,function(a, b) {
          var ret = [];
          a.forEach(function(a) {
            b.forEach(function(b) {
              ret.push(a.concat([b]));
            });
          });
          return ret;
        }, [[]]);
      },

      showAddSkuDialog() {
        this.addSpuVisible = true;
      },

      //新增提交按钮
      async addSubmitBtn(){

        //添加规格参数
        /*console.log(this.specArr)
        console.log(this.specValueArrAAAA)

        let sku_value_arr = []
        let sku_info_arr = []

        this.specArr.forEach((item,index) => {
          let skuObj = {}
          skuObj.sku_id = item
          skuObj.sku_value_id = this.specValueArrAAAA[index]
          /!*skuObj[item] = this.specValueArrAAAA[index]*!/
          sku_value_arr.push(skuObj)
        })

        this.skuTableData.forEach((item,index) => {
          let skuArr = []
          let tempArr = []
          item.skuArr.forEach((item,index) => {
            let tempObj = {}
            tempObj[item.pid] = item.id
            skuArr.push(tempObj)
          })
          tempArr.push(skuArr)
          tempArr.push(item.other.thumb_id)
          tempArr.push(item.other.price)
          tempArr.push(item.other.stock)
          tempArr.push(item.other.code)
          sku_info_arr.push(tempArr)
        })

        console.log(sku_value_arr)
        console.log(sku_info_arr)

        this.addForm.sku_value_arr = sku_value_arr
        this.addForm.sku_info_arr = sku_info_arr*/

        //设置图片ID
        this.addForm.thumb_id = this.picList.map((item,index) => {
          return item.id
        })

        const params = this.addForm;
        const res = await this.$api.setGoods(params);
        if(res.data.level=='success'){
          this.$message({
            message: '修改成功',
            type: 'success',
          });
          this.$router.back(-1)
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },


      //上传sku图片
      /*skuUploadSuccess(res, file,index) {
        this.skuTableData[index].other.thumb_id = res.data.id
        this.skuTableData[index].other.thumb_url = res.data.img_url
      },*/

      //上传sku图片之前
      /*beforeSkuAvatarUpload(index) {

      },*/

      handleSuccess(res, file){
        this.picList.push({id: res.data.id,key: file.uid,url: res.data.img_url})
      },
      //上传失败提示
      uploadError() {
        this.$message.error("上传失败，请重新上传");
      },
      updateFile(val) {
        this.picList = val
      },

      /**
       * 清空上传组件
       */
      emptyUpload() {
        const mainImg = this.$refs.upload
        if (mainImg) {
          if (mainImg.length) {
            mainImg.forEach(item => {
              item.clearFiles()
            })
          } else {
            this.$refs.upload.clearFiles()
          }
        }
      }


    }
  }
</script>

<style scoped>
  .action-bar{
    background-color: #ffffff;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .add-goods{
    padding: 10px 0px;
    border-left: 15px solid #EDF1F5;
    border-right: 15px solid #EDF1F5;
    border-top: 15px solid #EDF1F5;
  }

  .step-title{
    position: fixed;
    background-color: #ffffff;
    z-index: 999;
    height: 50px;
    border: 1px solid red;
    top: 0 !important;
    z-index: 999999999999;
  }
  /*.step-title h1{
    font-size: 17px;
    color: #414658;
    padding: 20px 0 20px 20px;
  }*/

  .divider{
    width: 100%;
    height: 15px;
    background-color: #EDF1F5;
  }

  .isFixed{
    position: fixed;
    top: 0;
    left: 300px;
    z-index: 99999;
  }

  .add-goods .step{
  }
  .add-goods .step h1{
    font-size: 17px;
    color: #414658;
    border-bottom: 1px solid #EDEDED;
    padding: 20px 0 20px 20px;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .spec-item{
    padding-bottom: 30px;
  }
  .spec-item:first-child{
    padding-bottom: 0;
  }

  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    margin-left: 50px;
    margin-bottom: 20px;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }

</style>
